<template>
  <div style="width: 100%; height: 100%">
    <guangbopanelCard
     :headerFlag="true"
          :leftIconFlag="true"
      :leftFlag="true"
      :asideLeftWidth="'200px'"
    >
      <template #header>
        <div class="headers">
          <div class="headersTop fbc">
            <span class="headersTitle">基本信息</span>
            <!-- <span>
              <el-button @click="delAllFn" type="text">
                <Edit style="width: 1em; height: 1em" />
                <span style="color: #2b85eb; margin-left: 5px">修改</span>
              </el-button>
              <el-button @click="delAllFn" type="text"
                ><Delete
                  size="18"
                  style="width: 1em; height: 1em; color: red"
                />
                <span style="color: red; margin-left: 5px">删除</span>
              </el-button>
            </span> -->
          </div>
          <div class="headersBottom">
            <span>
              <span>广播接入号码：</span>
              <span>010-88888888-8888</span>
            </span>
            <span class="items">
              <span>分区名称：</span>
              <span>分区1</span>
            </span>
            <span class="items">
              <span>报警联动用户：</span>
              <span>用户1/用户2/用户3</span>
            </span>
          </div>
        </div>
      </template>
      <template #asideLeft>
        <div class="asideLefts">
          <div class="asideLeftsCenter">
            <el-input
              @change="searchFn"
              placeholder="请输入关键词"
              v-model="state.searchText"
              clearable
            >
              <template #suffix>
                <el-icon
                  @click="searchFn"
                  class="el-input__icon"
                  style="cursor: pointer"
                >
                  <Search />
                </el-icon>
              </template>
            </el-input>
            <div class="asideLeftsList">
              <div v-for="(item, index) in state.fenquList" :key="index">
                <span class="fbc" style="margin: 10px 0">
                  <span :title="item.groupName">{{
                    subStrFn(item.groupName)
                  }}</span>
                  <span>
                    <Edit
                      @click="fenquEditFn(item)"
                      style="
                        width: 1em;
                        height: 1em;
                        color: #2b85eb;
                        margin-right: 8px;
                      "
                    />
                    <Delete
                      @click="fenquDelFn(item)"
                      style="width: 1em; height: 1em; color: red"
                    />
                  </span>
                </span>
              </div>
            </div>
            <div class="btns" @click="treeClickAddFn">
              <el-button type="text"
                ><el-icon
                  size="18"
                  class="icons iconfont icon-xinzeng"
                ></el-icon>
                新增</el-button
              >
            </div>
          </div>
        </div>
      </template>
      <template #article>
        <div>
          <el-radio-group v-model="state.radio3" size="default">
            <el-radio-button label="终端" value="终端" />
          </el-radio-group>
        </div>
        <guangbovxeTB
        ref="guangbovxeTB"
          title="列表"
          :tableheads_show="state.tableheads_show"
          :listUrl="state.listUrl"
          :caozuoList="state.caozuoList"
          @addFn="addFn"
          @delAllFn="delAllFn"
          @edit="editFn"
          @bofang="bofangFn"
          @shanchu="delFn"
        ></guangbovxeTB>
      </template>
    </guangbopanelCard>
    <!-- 新增 -->
    <el-dialog v-model="state.addFlag" width="40%" :before-close="handleClose">
      <template #title>
        <span class="themfontColor">{{ state.addTitle }}</span>
      </template>
      <div style="width: 100%; display: flex; justify-content: center">
        <el-form
          ref="formRef"
          :model="state.formData"
          :rules="state.formDataRules"
          label-width="120px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="分区" prop="groupId">
                <el-select style="width: 100%;" v-model="state.formData.groupId" placeholder="请选择">
                  <el-option :label="item.label" :value="item.value" v-for="(item,index) in state.fenquSelectList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="号码" prop="userNumber">
                <el-input
                  v-model="state.formData.userNumber"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
                     <el-col :span="12">
              <el-form-item label="名称" prop="userName">
                <el-input
                  v-model="state.formData.userName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-select style="width: 100%;" v-model="state.formData.type" placeholder="请选择">
                  <el-option label="普通终端" :value="0"></el-option>
                  <el-option label="对讲主机" :value="1"></el-option>
                  <el-option label="融合终端" :value="2"></el-option>
                  <el-option label="扩音终端" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
                     <el-col :span="12">
              <el-form-item label="工作状态" prop="enable">
               <el-select style="width: 100%;" v-model="state.formData.enable" placeholder="请选择">
                  <el-option label="禁话" value="0"></el-option>
                  <el-option label="正常" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="呼叫源码" prop="callSourceNo">
                <el-select style="width: 100%;" v-model="state.formData.callSourceNo" placeholder="请选择">
                  <el-option :label="item.label" :value="item.value" v-for="(item,index) in state.yuanmaList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
                     <el-col :span="12">
              <el-form-item label="录音许可" prop="record">
                <el-select style="width: 100%;" v-model="state.formData.record" placeholder="请选择">
                  <el-option label="禁用" value="0"></el-option>
                  <el-option label="启用" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="广播许可" prop="broadcast">
                 <el-select style="width: 100%;" v-model="state.formData.broadcast" placeholder="请选择">
                   <el-option label="禁用" value="0"></el-option>
                  <el-option label="启用" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
                     <el-col :span="12">
              <el-form-item label="注册鉴权" prop="auth">
               <el-select style="width: 100%;" v-model="state.formData.auth" placeholder="请选择">
                  <el-option label="禁用" value="0"></el-option>
                  <el-option label="启用" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="state.formData.password"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="选择文件">
            <el-upload
              ref="uploadRef"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :on-change="handleFileChange"
              class="upload-demo"
              accept=".mp3"
              action="#"
              :auto-upload="true"
              drag
              :limit="1"
              :multiple="false"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="upload__text">
                <div>点击或将文件拖拽到这里上传</div>
                <div>支持mp3格式，最大10MB</div>
              </div>
            </el-upload>
          </el-form-item> -->
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveAddFn"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 分区新增 -->
    <el-dialog
      v-model="state.fenquAddFlag"
      width="30%"
      :before-close="fenquHandleClose"
    >
      <template #title>
        <span class="themfontColor">{{ state.fenquAddTitle }}</span>
      </template>
      <div style="width: 100%; display: flex; justify-content: center">
        <el-form
          ref="fenquFormRef"
          :model="state.fenquFormData"
          :rules="state.fenquFormDataRules"
          label-width="120px"
        >
          <el-form-item label="分区名称" prop="groupName">
            <el-input
              v-model="state.fenquFormData.groupName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="号码" prop="broadcastNumber">
            <el-input
              v-model.number="state.fenquFormData.broadcastNumber"
              placeholder="请输入"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="报警联动用户" prop="warningUser">
            <el-select
              v-model="state.fenquFormData.warningUser"
              multiple
              multiple-limit="3"
              placeholder="请选择"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in state.warningUserList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="选择文件">
            <el-upload
              ref="uploadRef"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :on-change="handleFileChange"
              class="upload-demo"
              accept=".mp3"
              action="#"
              :auto-upload="true"
              drag
              :limit="1"
              :multiple="false"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="upload__text">
                <div>点击或将文件拖拽到这里上传</div>
                <div>支持mp3格式，最大10MB</div>
              </div>
            </el-upload>
          </el-form-item> -->
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="fenquHandleClose">取消</el-button>
          <el-button type="primary" @click="fenquSaveAddFn"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 播放 -->
    <el-dialog
      v-model="state.bofangFlag"
      width="22%"
      :before-close="bofanghandleClose"
    >
      <template #title>
        <span class="themfontColor">播放</span>
      </template>
      <div style="text-align: center">
        <el-form
          ref="bofangRef"
          :model="state.form"
          :rules="state.rules"
          label-width="100px"
        >
          <el-form-item label="音乐名称：">
            <span class="themfontColor">{{ state.detailData.MusicName }}</span>
          </el-form-item>
          <el-form-item label="播放次数：" prop="num">
            <el-input
              v-model="state.form.num"
              type="Number"
              :min="1"
              :max="100"
              style="width: 240px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="广播号码：" prop="phone">
            <el-select v-model="state.form.phone" style="width: 240px" multiple>
              <el-option
                v-for="item in state.telephoneData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- <audio src="@/assets/guangboimg/鸟叫.mp3" controls autoplay></audio> -->
        <el-button @click="startFn" type="primary">开启</el-button>
        <el-button @click="endFn">关闭</el-button>
        <!-- <audio :src="state.detailData.FilePath" controls autoplay></audio> -->
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue-demi";
import axios from "@/utils/request";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { table_headers } from "@/assets/table_headers/table_headers";
import usepagesStore from "@/store/modules/pages";
const userStore = usepagesStore();
const props = defineProps({});
const emit = defineEmits([""]);
const { proxy } = getCurrentInstance();
let state = reactive({
  radio3: "终端", //终端
  searchText: "", //搜索
  fenquAddFlag: false, //分区新增
  fenquAddTitle: "新增", //分区新增标题
  fenquList: [], //分区列表
  warningUserList: [], //报警联动用户
  fenquSelectList:[],
  yuanmaList:[],//呼叫源码
  fenquFormData: {},
  fenquFormDataRules: {
    groupName: [
      {
        required: true,
        message: "请输入分区名称",
        trigger: "blur",
      },
    ],
    broadcastNumber: [
      {
        required: true,
        message: "请输入号码",
        trigger: "blur",
      },
    ],
  },
  searchData: {},
  addTitle: "新增",
  pageconfig: {
    currentPage: 1,
    pageSize: 20,
    total: 0,
  },
  formData: {},
  formDataRules: {
    groupId: [
      {
        required: true,
        message: "请选择分区",
        trigger: "change",
      },
    ],
    userNumber: [
      {
        required: true,
        message: "请输入号码",
        trigger: "blur",
      },
    ],
    userName: [
      {
        required: true,
        message: "请输入名称",
        trigger: "blur",
      },
    ],
    type: [
      {
        required: true,
        message: "请选择类型",
        trigger: "change",
      },
    ],
    enable: [
      {
        required: true,
        message: "请选择工作状态",
        trigger: "change",
      },
    ],
    callSourceNo: [
      {
        required: true,
        message: "请选择呼叫源码",
        trigger: "change",
      },
    ],
    record: [
      {
        required: true,
        message: "请选择录音许可",
        trigger: "change",
      },
    ],
    broadcast: [
      {
        required: true,
        message: "请选择广播许可",
        trigger: "change",
      },
    ],
    auth: [
      {
        required: true,
        message: "请选择注册鉴权",
        trigger: "change",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  form: { num: 1, phone: [] },
  rules: {
    num: [
      {
        required: true,
        message: "请输入播放次数",
        trigger: "blur",
      },
    ],
    phone: [
      {
        required: true,
        message: "请选择广播号码",
        trigger: "change",
      },
    ],
  },
  addFlag: false,
  bofangFlag: false,
  caozuoList: [
    // {
    //   caozuoType: "bofang",
    //   label: "播放",
    //   type: "text",
    // },
    {
      caozuoType: "edit",
      label: "编辑",
      type: "text",
    },
    {
      caozuoType: "shanchu",
      label: "删除",
      type: "text",
    },
  ],
  selectData: [],
  tabledata: [],
  tableheads_show: computed(() => table_headers.t_sip_user),
  detailData: {},
  telephoneData: [],
  uploadData: {},
  uploadUrl: "",
  fileType: ["mp3"],
  fenquListUrl: "/sip/config/group/listNoPage",
  fenquAddUrl: "/sip/config/group/add",
  fenquEditUrl: "/sip/config/group/edit",
  fenquDelUrl: "/sip/config/group/",
  fenquDetailUrl: "/sip/config/group/",

  listUrl: "/sip/config/user/list",
  addUrl: "/sip/config/user/add",
  editUrl: "/sip/config/user/edit",
  delUrl: "/sip/config/user/",
  detailUrl: "/sip/config/user/",
});
//新增弹层
const addFn = () => {
  //新增
  state.addTitle = "新增";
  state.addFlag = true;
};
const editFn = (row) => {
  //编辑
  console.log(row, "row");
  state.addTitle = "编辑";
  state.addFlag = true;
  state.formData = row;
  // state.formData.type = state.formData.type + "";
};
const handleClose = () => {
  //关闭
  state.addFlag = false;
  state.formData = {};
  proxy.$refs["formRef"].resetFields();
};
const saveAddFn = () => {
  //保存
  let url = state.addUrl;
  if (state.addTitle == "新增") {
    url = state.addUrl;
  } else {
    url = state.editUrl;
  }
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      axios
        .post(url, state.formData)
        .then((res) => {
          if (res.code == 200) {
            // state.addFlag = false;
            ElMessage.success(res.msg);
proxy.$refs["guangbovxeTB"].getList();
            handleClose();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch((err) => {
          ElMessage.error(res.msg);
        });
    }
  });
};
const bofangFn = (row) => {
  //播放
  state.detailData = row;
  state.bofangFlag = true;
};
const bofanghandleClose = (row) => {
  //播放关闭
  state.bofangFlag = false;
};
function startFn() {
  //开启
  proxy.$refs["bofangRef"].validate((isOk) => {
    if (isOk) {
      axios
        .post("/Service/GetWebApiControlBroadcast", {
          type: 0, //0 开始播放 1关闭播放
          TerminalNOs: state.form.phone, //广播号码集合
          MusicIDs: [state.detailData.MusicID], //音乐ID集合，开始播放必填
          frequency: state.form.num, //播放次数
        })
        .then((res) => {
          if (res.Result == true) {
            ElMessage.success(res.Msg);
            state.bofangFlag = false;
          } else {
            ElMessage.error(res.Msg);
          }
        });
    }
  });
}
function endFn() {
  //关闭
  proxy.$refs["bofangRef"].validate((isOk) => {
    if (isOk) {
      axios
        .post("/Service/GetWebApiControlBroadcast", {
          type: 1, //0 开始播放 1关闭播放
          TerminalNOs: state.form.phone, //广播号码集合
          MusicIDs: [state.detailData.MusicID], //音乐ID集合，开始播放必填
          frequency: state.form.num, //播放次数
        })
        .then((res) => {
          ElMessage.success("关闭成功");
          state.bofangFlag = false;
        });
    }
  });
}
const delAllFn = () => {
 if (userStore.records.length == 0) {
    ElMessage.warning("请选择要删除的记录");
    return;
  } else {
    let str = [];
    userStore.records.forEach((item) => {
      str.push(item.id);
    });
    ElMessageBox.confirm("确认删除?", "提示", {
      confirmButtonText: "删除",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        axios.delete(state.delUrl + str.join(",")).then((res) => {
          ElMessage.success("删除成功");
          userStore.records = [];
          proxy.$refs["guangbovxeTB"].getList();
        });
      })
      .catch(() => {});
  }
};
const delFn = (row) => {
  //删除
  state.detailData = row;
  ElMessageBox.confirm("确认删除?", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.delete(state.delUrl + row.id).then((res) => {
        ElMessage.success("删除成功");
        proxy.$refs["guangbovxeTB"].getList();
      });
    })
    .catch(() => {});
};
//左侧树形新增
const fenquHandleClose = () => {
  state.fenquAddFlag = false;
  state.fenquFormData = {};
  proxy.$refs["fenquFormRef"].resetFields();
};
const treeClickAddFn = () => {
  state.fenquAddTitle = "新增";
  state.fenquAddFlag = true;
};
const subStrFn = (str) => {
  if (str?.length > 7) {
    return str.substring(0, 7) + "...";
  } else {
    return str;
  }
};
//编辑
const fenquEditFn = (row) => {
  console.log(row, "row");
  state.fenquAddTitle = "编辑";
  state.fenquFormData = row;
  state.fenquFormData.warningUser = [];
  if (row.firstAlarmNumber) {
    state.fenquFormData.warningUser[0] = row.firstAlarmNumber.toString();
  }
  if (row.secondAlarmNumber) {
    state.fenquFormData.warningUser[1] = row.secondAlarmNumber.toString();
  }
  if (row.thirdAlarmNumber) {
    state.fenquFormData.warningUser[2] = row.thirdAlarmNumber.toString();
  }
  state.fenquAddFlag = true;
};
//保存
const fenquSaveAddFn = () => {
  proxy.$refs["fenquFormRef"].validate((valid) => {
    if (valid) {
      let url = state.fenquAddUrl;
      if (state.fenquAddTitle == "新增") {
        url = state.fenquAddUrl;
      } else {
        url = state.fenquEditUrl;
      }
      if (state.fenquFormData?.warningUser?.length > 0) {
        state.fenquFormData.firstAlarmNumber = Number(
          state.fenquFormData.warningUser[0]
        );
        state.fenquFormData.secondAlarmNumber =
          state.fenquFormData.warningUser.length > 1
            ? Number(state.fenquFormData.warningUser[1])
            : "";
        state.fenquFormData.thirdAlarmNumber =
          state.fenquFormData.warningUser.length > 2
            ? Number(state.fenquFormData.warningUser[2])
            : "";
      }
      console.log(state.fenquFormData, "state.fenquFormData");
      axios.post(url, state.fenquFormData).then((res) => {
        if (res.code == 200) {
          fenquHandleClose();
          ElMessage.success(res.msg);
          getFenquList();
        } else {
          ElMessage.error(res.msg);
        }
      });
    }
  });
};
//删除
const fenquDelFn = (row) => {
  ElMessageBox.confirm("确认删除?", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.delete(state.fenquDelUrl + row.id).then((res) => {
        ElMessage.success("删除成功");
        getFenquList();
      });
    })
    .catch(() => {});
};
//搜索
const searchFn = () => {
  getFenquList("search");
};
function handleFileChange(file) {}

function uploadSuccess(item) {}
async function beforeUpload(file) {
  console.log(file, "file");

  state.uploadData = file;
  if (file.type != "" || file.type != null || file.type != undefined) {
    //截取文件的后缀，判断文件类型
    const FileExt = file.name.replace(/.+\./, "").toLowerCase();
    file.name.substring(0, file.name.lastIndexOf(".")); //截取文件前缀
    //计算文件的大小
    const isLt5M = file.size / 1024 / 1024 < 10; //这里做文件大小限制
    //const isLt5M = file.size / 1024 < 500; //500kb
    //如果大于50M
    if (!isLt5M) {
      ElMessage.error("上传文件过大!");
      return false;
    } else {
      try {
        const compressedFile = await compressAudio(file);
        let pattern = /base64,(.*)/; // 使用正则表达式匹配指定字符后面的内容
        let result = compressedFile.match(pattern)[1]; // 提取匹配结果的第一个捕获组
        state.uploadUrl = result;
        saveAddFn();
        // 这里可以将compressedFile发送到服务器
      } catch (error) {
        console.error("压缩失败:", error);
      }
    }

    //如果文件类型不在允许上传的范围内
    if (state.fileType.includes(FileExt)) {
      return true;
    } else {
      proxy.$message.error("请上传mp3格式文件!");
      return false;
    }
  }
}
function compressAudio(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return new Promise((resolve, reject) => {
    reader.onload = (event) => {
      const compressedBase64 = event.target.result; // 获取Base64字符串
      // 这里可以添加压缩逻辑，例如使用lamejs或其他库压缩mp3
      // 压缩后的音频通常会更小，可以用来减少上传数据量
      // 压缩后的操作代码...
      resolve(compressedBase64);
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
}
const queryFn = () => {
  //查询
  let obj = {};
    proxy.$refs["guangbovxeTB"].state.searchData = obj;
  proxy.$refs["guangbovxeTB"].getList();
};
const resetFn = () => {
  //重置
    let obj = {};
  state.searchData = {};
      proxy.$refs["guangbovxeTB"].state.searchData = obj;
  proxy.$refs["guangbovxeTB"].getList();
};
function getFenquList(val) {
  let obj = {};
  if (val == "search") {
    obj.groupName = state.searchText;
  }
  axios.post(state.fenquListUrl, obj).then((res) => {
    if (res.code == 200) {
      // if (state.pageconfig.pageSize == 10000) {
      //   state.tableDataAll = res.data.list;
      // } else {
      //   state.tabledata = res.data.list;
      //   state.pageconfig.total = res.data.total;
      // }
      state.fenquList = res.data;
       state.fenquSelectList = res.data.map((item) => {
        return {
          label: item.groupName,
          value: item.id,
        };
      });
    }
  });
}
function getSelect() {
  //报警联动用户
  axios.post("/sip/config/user/listNoPage", {}).then((res) => {
    if (res.code == 200) {
      state.warningUserList = res.data.map((item) => {
        return {
          label: item.userNumber,
          value: item.userNumber,
        };
      });
    }
  });
  //呼叫源码
  axios.post("/sip/config/source/listNoPage", {}).then((res) => {
 if (res.code == 200) {
      state.yuanmaList = res.data.map((item) => {
        return {
          label: item.sourceNumber,
          value: item.sourceNumber,
        };
      });
    }
  })
}
onMounted(() => {
  getFenquList();
  getSelect();
  queryFn();
});
</script>

<style scoped lang="scss">
.headers {
  width: 100%;
  .headersTop {
    width: 100%;
    .headersTitle {
      font-weight: 700;
    }
  }
  .headersBottom {
    margin-top: 10px;
    font-size: 14px;
    color:#3f3e3e;
    .items {
      margin-left: 50px;
    }
  }
}
.asideLefts {
  position: relative;
  // min-height:750px;
  padding: 10px;
  border-radius: 10px;
  .asideLeftsCenter {
    padding: 10px;
    min-height: calc(100vh - 185px);
    background-color: #f9f9fa;
    .asideLeftsList {
    }
    .btns {
      width: 160px;
      height: 30px;
      text-align: center;
      background-color: #fff;
      position: absolute;
      bottom: 20px;
    }
  }
}
</style>